import React from 'react';
import { Link, withRouter } from 'react-router-dom';
import { Icon, Button, message } from 'antd';
import PropTypes from 'prop-types';

import { inject, observer } from 'mobx-react';
// import AppState from '../store/app_state'
import User from '../store/user_store'
import logo from '../image/logo.png';
import UserModal from './user_modal';


@inject((stores) => {
  const store = {
    userStore: stores.userStore,
  }
  return store
})
@observer
class MobileHeder extends React.Component {
  constructor() {
    super();
    this.state = {
      modalVisible: false,
    }
    this.setModalVisibale = this.setModalVisibale.bind(this)
    this.doLogout = this.doLogout.bind(this)
  }
  componentDidMount() {
  }
  // 设置modal是否可见
  setModalVisibale(bool) {
    this.setState({
      modalVisible: bool,
    })
  }
  // 退出登录
  doLogout() {
    this.props.userStore.doLogout().then((res) => {
      message.success(res.message);
      try {
        if (window.location.href.indexOf('user-center') !== -1) {
          this.props.history.push('/')
        }
      } catch (e) {

      }
    });
  }
  // modal table 改变
  changeModalTabs(activeKey) {
    this.setState({
      action: activeKey,
    })
  }
  render() {
    const { userInfo, isLogin } = this.props.userStore
    return (
      <header id="mobile-header">
        <Link to="/" className="logo">
          <img src={logo} alt="logo" />
          <span>小白新闻</span>
        </Link>
        {!isLogin ?
          <div className="user-center" onClick={() => this.setModalVisibale(!this.state.modalVisible)}>
            <Icon type="setting" />
          </div>
           :
          <div className="user">
            <Link to="/user-center"><Button type="primary" className="user">{userInfo.nickName}</Button></Link>
            <div className="logOut" onClick={this.doLogout}>
              <Icon type="appstore" className="user-icon" />退出
            </div>
          </div>
        }
        <UserModal
          modalVisible={this.state.modalVisible}
          setModalVisibale={this.setModalVisibale}
        />
      </header>

    )
  }
}
export default withRouter(MobileHeder);
MobileHeder.propTypes = {
  userStore: PropTypes.instanceOf(User),
  history: PropTypes.objectOf(Object),
}
